<template>
  <div class="user-interface">
    <div class="interface-header">
      <h2>已完成订单 ({{ completedOrders.length }})</h2>
      <div class="controls">
        <button @click="clearCompletedOrders" class="clear-btn">
          清空已完成订单
        </button>
      </div>
    </div>

    <div class="orders-grid">
      <OrderItem
        v-for="order in completedOrders"
        :key="order.id"
        :order="order"
        :showActions="false"
      />
    </div>
  </div>
</template>

<script>
import OrderItem from "./OrderItem.vue";

export default {
  name: "UserInterface",
  components: {
    OrderItem,
  },
  data() {
    return {
      completedOrders: [],
      completeOrderAudio: null,
    };
  },
  methods: {
    addCompletedOrder(order) {
      this.completedOrders.unshift(order);
      this.playCompleteAudio();
      this.sendNotification(order);
    },
    clearCompletedOrders() {
      if (confirm("确定要清空所有已完成订单吗？")) {
        this.completedOrders = [];
      }
    },
    playCompleteAudio() {
      if (this.completeOrderAudio) {
        this.completeOrderAudio.play();
      }
    },
    sendNotification(order) {
      if (Notification.permission === "granted") {
        new Notification(`订单 #${order.id} 已完成`, {
          body: "请顾客取餐",
          icon: "/favicon.ico",
        });
      }
    },
    initAudio() {
      this.completeOrderAudio = new Audio("/audio/complete-order.mp3");
      // 请求通知权限
      if (Notification.permission === "default") {
        Notification.requestPermission();
      }
    },
  },
  mounted() {
    this.initAudio();
  },
};
</script>

<style scoped>
.user-interface {
  padding: 20px;
  background-color: #f5f5f5;
}

.interface-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.clear-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background-color: #f44336;
  color: white;
  cursor: pointer;
}

.orders-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}
</style>
